<template>
  <div>
    <h3>Tab选项</h3>
    <div style="background: #e9eef3; padding: 20px">
      <Card :bordered="false">
        <div class="shuru">
          <Input v-model="value13" size="large">
            <Select v-model="select3" slot="prepend" style="width: 160px">
              <Option value="name">Name</Option>
              <Option value="Email">Email</Option>
              <Option value="CreateTime">Create-Time</Option>
          </Select>
        <Button slot="append" icon="ios-search" @click="selectuser"></Button>
           </Input>
           </div>
           <el-button style="float: right; padding: 3px 0" type="text"
         @click="dialogVisible = true" >添加</el-button>
        <el-table :data="this.$store.state.totableData" style="width: 100%">
          <el-table-column label="Name" width="398">
            <template slot-scope="scope">
              <!-- <i class="el-icon-time"></i> -->
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="Email" width="398">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>Email: {{ scope.row.Email }}</p>
                <div slot="reference" class="name-wrapper"> 
                  <el-tag size="medium">{{ scope.row.Email }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
            <el-table-column label="Create-Time" width="398">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>创建时间: {{ scope.row.CreateTime }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.CreateTime }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="Handle" width="398">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row),xianshi = true"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </Card>
      <el-dialog  
  title="添加"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <el-input placeholder="id" v-model="newtableData.id" clearable></el-input><br>
   <el-input placeholder="name" v-model="newtableData.name" clearable></el-input><br>
  <el-input placeholder="Email" v-model="newtableData.Email" clearable></el-input><br>
  <el-input placeholder="Create-Time" v-model="newtableData.CreateTime" clearable></el-input><br>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="adduser(),dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
<el-dialog
  title="修改"
  :visible.sync="xianshi"
  width="30%"
  :before-close="handleClose">
   <el-input placeholder="name" v-model="newtableData.name" clearable></el-input><br>
  <el-input placeholder="Email" v-model="newtableData.Email" clearable></el-input><br>
  <el-input placeholder="Create-Time" v-model="newtableData.CreateTime" clearable></el-input><br>
  <span slot="footer" class="dialog-footers">
    <el-button @click="dialogVisibles = false">取 消</el-button>
    <el-button type="primary" @click="updateuser(),xianshi = false">确 定</el-button>
  </span>
</el-dialog>
    </div>
    
  </div>
</template>
<script>
import {getuser} from '../api/user'
export default {
  name: "Options",
  data(){
    return {
      souuo:{
        Name:"",
      },
      newtableData:{
        id:"",
        Name:"",
        Email:"",
        CreateTime:""
      },
         dialogVisible: false,
         xianshi:false,
         value13:"",
         select3:"",
    }
  },

  created(){
    
  }, 
  mounted(){
    this.$store.dispatch('vgetuser')
  },
  // updated(){
  //   this.$store.dispatch('vgetuser')
  // },

  methods: {
    //编辑事件
    handleEdit(index) {
     
      this.newtableData=this.$store.state.totableData[index]
      //  console.log(this.newtableData);
      //  console.log(this.$store.state.totableData[index])
    },
    //修改
    updateuser(){
      console.log(this.newtableData.id),
      console.log(this.newtableData)
      this.$store.dispatch("vupdatauser",{id:this.newtableData.id,data:this.newtableData})
      this.newtableData={
        id:"",
        Name:"",
        Email:"",
        CreateTime:""
      }
    },

    //删除事件
    handleDelete(index) {
      console.log(index);
      console.log(this.$store.state.totableData[index].id)
      this.$store.dispatch("vdeluser",this.$store.state.totableData[index].id)
      this.get()
    },

    //获取所有数据
    get(){
      this.$store.dispatch("vgetuser")
    },

    //增加数据
    adduser(){
      console.log(this.newtableData)
      this.$store.dispatch("vadduser",this.newtableData)
      //  this.$store.dispatch("vgetuser")
    },

    //查询
    selectuser(){
      if(this.select3=="name"){
          let obj = {
             [this.select3]:this.value13
          }
          console.log("obj",obj)
        getuser(obj).then((res)=>{
          this.$store.commit("vselectuser",res)
        })
      }else if(this.select3=="Email"){
          let ems ={
            [this.select3]:this.value13
          }
          getuser(ems).then((res)=>{
            this.$store.commit("vselectuser",res)
          })
      }else if(this.select3=="CreateTime"){
        let cre={
          [this.select3]:this.value13
        }
        getuser(cre).then((res)=>{
          this.$store.commit("vselectuser",res)
        })
      }else{
        getuser().then((res)=>{
          this.$store.commit("vselectuser",res)
        })
      }
     
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
         },
  },
};
</script>

<style scoped>
.shuru{
  width: 800px;
  display: inline-block;
}

</style>